function $(id){
	return document.getElementById(id);
}
drag = {
	position:{},
	result:{'left':0,'top':0},
	leftGap:100,
	topGap:100,
	init:function(o,q){
		drag.addEvent(o,'mousedown',drag.reg,false);
		drag.elm=o;
		drag.elm2=q;
	},
	reg:function(e){
		var o = drag.elm;
		drag.fixE(e);
		o.startX = e.clientX;
		o.startY = e.clientY;
		var p = drag.getStyle(o,'backgroundPosition');
		if(!!p){
			var a = p.split(' ');
			drag.position.h = parseFloat(a[0]);
			drag.position.v = parseFloat(a[1]);
		}else{
			o.style.cssText = 'position:absolute;top:0;left:0';
			drag.position = {'h':0,'v':0};
		}
		if(document.addEventListener){
			document.addEventListener('mousemove',drag.move,true);
			document.addEventListener('mouseup',drag.end,true);
		}else if(document.attachEvent){
			o.setCapture();
			o.attachEvent('onmousemove',drag.move);
			o.attachEvent('onmouseup',drag.end);
			o.attachEvent('onlosecapture',drag.end);
		}else{
			drag.oldMove = document.onmousemove;
			drag.oldEnd = document.onmouseup;
			o.onmousemove = drag.move;
			o.onmouseup = drag.end;
		}
		if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble=true;}
		if(e.preventDefault){e.preventDefault();}else{e.returnValue=false;}
	},
	move:function(e){
		drag.fixE(e);
		var o = drag.elm;
		var left = drag.position.h + e.clientX - o.startX;
		var top = drag.position.v + e.clientY - o.startY;
		o.style.backgroundPosition = left+'px '+ top + 'px';
		drag.elm2.style.backgroundPosition = (left-drag.leftGap) + 'px '+ (top-drag.topGap) + 'px';
		if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble=true;}
	},
	end:function(e){
		drag.fixE(e);
		var o = drag.elm;
		if(document.removeEventListener){
			document.removeEventListener('mousemove',drag.move,true);
			document.removeEventListener('mouseup',drag.end,true);
		}else if(document.detachEvent){
			o.detachEvent('onmousemove',drag.move);
			o.detachEvent('onmouseup',drag.end);
			o.detachEvent('onlosecapture',drag.end);
			o.releaseCapture();
		}else{
			oldMove = document.onmousemove = drag.oldMove;
			oldEnd = document.onmouseup = drag.oldEnd;
		}
		if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble=true;}
		drag.result.left = drag.position.h - drag.leftGap;
		drag.result.top = drag.position.v - drag.topGap;
	},
	fixE:function(e){
		e = e || window.event;
		if(e.layerX === 'undefined'){e.layerX = e.offsetX;}
		if(e.layerY === 'undefined'){e.layerY = e.offsetY;}
		return e;
	},
	getStyle:function(elm,name){
		if(elm.style[name]){
			return elm.style[name];
		}else if(elm.currentStyle){
			return elm.currentStyle[name];
		}else if(document.defaultView&&document.defaultView.getComputedStyle){
			name = name.replace(/([A-Z])/g,'-$1').toLowerCase();
			var s = document.defaultView.getComputedStyle(elm,'');
			return s && s.getPropertyValue(name);
		}else{
			return null;
		}
	},
	addEvent:function(elm, evType, fn, useCapture){
		if (elm.addEventListener){
			elm.addEventListener(evType, fn, useCapture);
			return true;
		} else if (elm.attachEvent) {
			if(useCapture){
				elm.setCapture();
			}
			var r = elm.attachEvent('on' + evType, fn);
			return r;
		} else {
			elm['on' + evType] = fn;
		}
	}
}

drag.addEvent(window,'load',function(){
	var elm = $('target1');
	var elm2 = $('target2');
	drag.init(elm,elm2);
},false);